{extend name="layout" /}

{block name='title'}
相册 | Sinalma博客
{/block}
{block name="subtitleslug"}album{/block}

{block name="css"}
<link rel="stylesheet" type="text/css" href="__HTP____URL__/public/static/css/album.css">
<link rel="stylesheet" type="text/css" href="__HTP____URL__/public/static/css/pb.css">
<script type="text/javascript" src="__HTP____URL__/public/static/js/photoBrowser.js"></script> 
{/block}

{block name="subtitle"}Album{/block}

{block name='content'}
<div class="album-menu">
    <h1>相册</h1>
    <div class="album-menu-btn">
      <a class="album-btn active" href="javascript:void(0)" target="_self" rel="external">照片</a>
      <a class="album-btn" target="_self" href="javascript:$.hulla.send('暂不支持此模块', 'warning')">视频</a>
    </div>
</div>
<div class="photos" itemscope="" itemtype="http://schema.org/ImageGallery" data-pswp-uid="1">
</div>


<script type="text/javascript">
  function getPictures(page){
    var page = page ? page : 1;
    var url = "__HTP____URL__/index/album/getPics/page/"+page;
    $.ajax({
      url: url,
      type: 'get',
      // dataType: 'json',
      success: function (data, status) {
        loadSuccess();
        var htmlArr = new Array();
        var picLists = data;
            for (var i = 0; i < picLists.length; i++) {
                // 一段时间内的照片数
                var picsNum = picLists[i]['arr']['link'].length;
                var date = picLists[i]['date'];
                var year = picLists[i]['arr']['year'];
                var mouth = picLists[i]['arr']['mouth'];
                htmlArr.push("<section class='archives album'><h1 class='year'>"+year+"<em>"+mouth+"</em></h1><ul class='img-box-ul'>");
                for (var j = 0; j < picsNum; j++){
                    var name = picLists[i]['arr']['link'][j];
                    var small_link = picLists[i]['arr']['small_link'][j];

                    var pid = picLists[i]['arr']['pic_id'][j];
                    var picStr = "<figure class='thumb' itemprop='associatedMedia' itemscope='' itemtype='http://schema.org/ImageObject'>";

                    picStr += "<a href='javascript:showPswp("+pid+")' itemprop='contentUrl' data-size='640x640' data-type='image' data-target='"+small_link+"' target='_self'>";
                    picStr += "<img class='reward-img' data-type='image' data-src='"+small_link+"' src='"+small_link+"' itemprop='thumbnail' data-lzled='true'>";
                    picStr += "</a><figcaption style='display:none' itemprop='caption description'></figcaption>";
                    
                    picStr += "</figure>";
                    
                    htmlArr.push(picStr);
                }

                htmlArr.push("</ul></section>");
            }
            var html = htmlArr.join("");
            $('.photos').html(html);
            loadSuccess();
      },
      error: function (err, status) {
            loadSuccess();
            $('.photos').html(status+':图片加载失败，请重试或者通知管理员。');
      }
    });
  }
  $(function(){
    getPictures(1);
  });
</script>




{/block}

{block name="extra"}
<!-- photos browser -->
<div class="pswp">

    <!-- photos browser background -->
    <div class="pswp_bg"></div>
    
    <!-- 图片浏览器手势容器 -->
    <div class="pswp_scroll">
        
        <!-- photos of container -->
        <div class="pswp_container">
        </div>

        <!-- photos browser operations -->
        <div class="pswp_menu">
            
            <div class="pswp_topbar">
                <!-- 当前图片索引/总图片数 -->
                <div class="pswp_count">1 / 20</div>
                <button class="pswp_close" onclick="pswpClose()">
                    <i class="glyphicon glyphicon-remove"></i>
                </button>
                <button class="pswp_full" onclick="pswpFull()">
                    <i class="glyphicon glyphicon-resize-full"></i>
                </button>
                <button class="pswp_glass" onclick="pswpGlass()">
                    <!--  -->
                    <i class="glyphicon glyphicon-zoom-in"></i>
                </button>
            </div>

            <button class="pswp_prev" onclick="pswpPrev()">
                <i class="
glyphicon glyphicon-chevron-left"></i>
            </button>

            <button class="pswp_next" onclick="pswpNext()">
                <i class="
glyphicon glyphicon-chevron-right"></i>
            </button>

            <div class="pswp_caption">
                <span></span>
            </div>

        </div>

    </div>

</div>
{/block}